<template>
    <div class="header clearfix">
        <div class="wrapper">
            <div class="login hide-in-mobile">
                <a v-if="!isLogin" href="javascript:;" class="log" @click="login"><span class="icon"></span>登录</a>
                <a v-if="!isLogin" href="javascript:;" class="reg" @click="showReg"><span class="icon"></span>注册</a>
            </div>
            <div class="person hide-in-mobile">
                <Dropdown trigger="click" v-if="isLogin">
                    <a href="javascript:void(0)" class="name">
                        {{member.name}}&nbsp;&nbsp;&nbsp;<Icon type="arrow-down-b"></Icon>
                    </a>
                    <DropdownMenu slot="list">
                        <DropdownItem><router-link to='/personal'>个人中心</router-link></DropdownItem>
                        <DropdownItem><a @click="quit">退出</a></DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </div>
            <div class="search hide-in-mobile">
                <transition name="fade">
                    <Select v-model="searchTarget" size="small" style="width:74px" class="search-target" v-show="searchIsReady">
                        <Option value="statute">法规</Option>
                        <Option value="news">新闻</Option>
                    </Select>
                </transition>
                <input type="text" class="search-ipt" v-model="keyword" :class="{'is-active':searchIsReady}"/>
                <button type="button" class="search-btn" @click="search"><Icon type="search" size="20" color="#15ccac"></Icon></button>
            </div>
            <router-link :to="{path:'/'}">
                <div class="logo">
                    <h1 v-if="$route.path == '/'">国际药品注册网</h1>
                    {{$route.path != '/'?'国际药品注册网':''}}
                </div>
            </router-link>
            
            <div class="nav hide-in-mobile">
                <ul class="clearfix">
                    <li :class="{'is-active':$route.path == '/'}">
                        <router-link :to="{path:'/'}">首页</router-link>
                    </li>
                    <li :class="{'is-active':$route.path == '/statute'}" class="cascader">
                        <Cascader :data="categoryList.children" trigger="hover" v-model="link" @on-change="getLinkParam"><a>注册法规</a></Cascader>
                    </li>
                    <li :class="{'is-active':($route.path == '/questions'||$route.path == '//term-content')}">
                        <router-link :to="{path:'/questions'}">问与答</router-link>
                    </li>
                    <li :class="{'is-active':($route.path == '/term'||$route.path=='/term-content')}">
                    	<router-link :to="{path:'/term'}">术语学习</router-link>
                    </li>
                    <li :class="{'is-active':$route.path == '/news'}">
                        <router-link :to="{path:'/news'}">新闻资讯</router-link>
                    </li>
                    <li :class="{'is-active':$route.path == '/business'}">
                        <router-link :to="{path:'/business'}">业务服务</router-link>
                    </li>
                    <li :class="{'is-active':$route.path == '/codex'}">
                        <router-link :to="{path:'/codex'}">数据库</router-link>
                    </li>
                    <li :class="{'is-active':curIndex == 7}">
                    	<router-link :to="{path:'/about'}">关于我们</router-link>
                    </li>
                </ul>
            </div>

            <div class="hide hamburger show-in-mobile" @click="trans_in = true">
                <Icon type="navicon-round" size="20"></Icon>
            </div>
            <div class="search show-in-mobile">
                <transition name="fade">
                    <Select v-model="searchTarget" size="small" style="width:74px" class="search-target" v-show="searchIsReady">
                        <Option value="statute">法规</Option>
                        <Option value="news">新闻</Option>
                    </Select>
                </transition>
                <input type="text" class="search-ipt" v-model="keyword" :class="{'is-active':searchIsReady}" />
                <button type="button" class="search-btn" @click="search">
                    <Icon type="search" size="20" color="#15ccac"></Icon>
                </button>
            </div>
            <div class="show-in-mobile">
                <transition name="fade">
                    <div class="nav-layout" v-show="trans_in" @click.self="trans_in = false">
                        <transition name="slide-fade">
                            <div class="aside-nav" v-if="trans_in">
                                <div class="aside-login" v-if="!isLogin">
                                    <Button type="success" long @click="login">登录</Button>
                                    <br/><br/>
                                    <Button type="ghost" long @click="showReg">注册</Button>
                                </div>
                                <div class="aside-login" v-if="isLogin">
                                    <Avatar size="large" style="color: #fff;background-color: #15ccac; margin:0 auto; display:block;">{{member.name}}</Avatar>
                                    <br/><br/>
                                    <a href="/personal"><Button type="success" long>个人中心</Button></a>
                                    <br/><br/>
                                    <Button type="ghost" long @click="quit">退出</Button>
                                </div>
                                <div class="aside-menu">
                                    <ul>
                                        <li><router-link :to="{path:'/'}">首页</router-link></li>
                                        <li><ul-tree @transform="toggle" :data="categoryList" class="aside-sub-nav-menu"></ul-tree>
                                        </li>
                                        <li><router-link :to="{path:'/questions'}">问与答</router-link></li>
                                        <li><router-link :to="{path:'/term'}">术语学习</router-link></li>
                                        <li><router-link :to="{path:'/news'}">新闻资讯</router-link></li>
                                        <li><router-link :to="{path:'/business'}">业务服务</router-link></li>
                                        <li><router-link :to="{path:'/codex'}">数据库</router-link></li>
                                        <li><router-link :to="{path:'/about'}">关于我们</router-link></li>
                                    </ul>
                                </div>

                            </div>
                        </transition>
                    </div>
                </transition>
            </div>
        </div>
    </div>
</template>
<script>
    import ulTree from './ul_tree.vue';
    import { removeToken } from '../utils/auth.js';
    import { mapGetters } from 'vuex';
    export default{
        components:{ulTree},
        data(){
            return{
                link:[],
                curIndex:-1,
                trans_in:false,
                depth0:false,
                open: false,
                isLogin:false,
                showUserName:false,
                searchIsReady:true,
                searchTarget:'statute',
                keyword:''
            }
        },
        computed:{
            /*categoryList(){
                return this.$store.state.lawData
            },
            member(){
                return this.$store.state.member
            },*/
            ...mapGetters(['member','categoryList'])
        },
        mounted(){
            var interval = setInterval(_=>{
                if(this.member.id){
                    this.isLogin = true;
                    clearInterval(interval);
                }
            }, 1000)
        },
        methods:{
            getLinkParam(link){
                this.$router.push({path:'/statute',query:{q:link.join('|')}})
                //location.href = '/statute?q='+link.join('|');
            },
            toggle(val){
                this.trans_in = val;
            },
            login(){
                this.$store.dispatch('login',true);
                this.trans_in = false;
            },
            showReg(){
            	this.$store.dispatch('changeRegState',true);
                this.trans_in = false;
            },
            quit(){
                this.$store.dispatch('setToken', '').then(_=>{
                    removeToken();
                    this.$router.go(0);
                });
            },
            search(){
                if(!this.keyword){
                    return
                //    this.searchIsReady = !this.searchIsReady;
                }else{
                    if(this.searchTarget == 'statute'){
                        this.$router.push({path:'/statute',query:{s:this.keyword}});
                    }else{
                        this.$router.push({path:'/news',query:{s:this.keyword}});
                    }
                }
            }
        }
    }
</script>
<style type="text/css" scoped>
    .item {
        cursor: pointer;
    }
    .bold {
        font-weight: bold;
    }
    ul.demo {
        padding-left: 1em;
        line-height: 1.5em;
        list-style-type: dot;
    }
    .show-in-mobile{
        display: none;
    }
    .header{ border-top:4px solid #15ccac; border-bottom: 1px solid #15ccac;}
    .wrapper{ width:1200px; margin:0 auto; position: relative; height:96px; background:#fff;}
    .logo{ width:217px; height:70px; float: left; margin-top: 12px; background:url('../assets/images/icon/logo.png') no-repeat; text-indent:-99em; background-size:contain;}
    /* .logo img{ height:100%;} */
    .login{ float: right; margin-right:20px;color: #000000;}
    .login a{ padding:3px 14px; float: left; font-size: 16px; display:flex; align-items: center;}
    .login a.log{ background:#15ccac; color:#fff;}
    .login a.reg{ background:#ddd; color:#333;}
    .log span,.reg span{ display: inline-block; width:24px; height: 24px; margin-right: 6px;}
    .log span{ background:url('../assets/images/icon/login.png') no-repeat;}
    .reg span{ background:url('../assets/images/icon/register.png') no-repeat;}

    .search{ float:right; width:300px; height:30px; line-height:30px; margin-right:20px; position: relative;}
    .search-ipt{ width:0;border:none; border-bottom:1px solid #15ccac; outline:none; transition:all 0.2s linear 0s; position: relative; right:-100%;}
    .search-ipt.is-active{ width:100%; right:0; padding-left:75px;}
    .search-btn{ position: absolute; right:0; top:5px; cursor:pointer;}
    .search-target{ position: absolute; left:0; top:3px; z-index:11; appearance:none; border:none; color:#333; background:none; padding:0 5px; outline:none;}
    .nav{ position: absolute; bottom:0; right:0;}
    .nav > ul > li{ float: left; margin: 0 21px; position: relative;}
    .nav > ul > li a{ font-size: 16px; line-height: 1.5; display:block; padding:0 2px; position: relative;}
    .nav > ul > li a:hover,.nav > ul > li.is-active a{ color:#15ccac;}
    .nav > ul > li a:after{ content:''; display:block; width:0; height:2px; bottom:0; background:#15ccac; transition: width 0.2s ease 0s; margin: 0 auto;}
    .nav > ul > li a:hover:after,.nav > ul > li.is-active a:after{ width:100%;}
    .sub-nav{ position: absolute; min-height:230px; background: #f7f7f7; z-index: 111; top:31px; border:1px solid #eee;white-space:nowrap;}
    .sub-nav-menu{ display:inline-block; min-width: 160px;}
    .sub-nav-menu a{ padding:8px 15px; display:block; transition:all 0.2s linear;}
    .sub-nav-menu a i{ float:right; margin-right:10px;}
    .sub-nav-menu li:hover a{ background:#15ccac; color:#fff;}
    .hide{ display:none;}
    @media (max-width:1024px){
        .hide-in-mobile{ display:none;}
        .show-in-mobile{ display:block !important;}
        .wrapper{ height: auto; width:auto;}
        .logo{ height:54px; margin-top:7px; margin-left:15px;}
        .hamburger{ float:right; margin-top:24px; margin-right:20px; cursor:pointer;}

        .nav-layout{ position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.4); z-index:9999; overflow:hidden;}
        .aside-nav{ width:230px; background:#fff; height:100vh; float:right; position:relative; border-top:4px solid #15ccac; overflow-y:auto; }
        .aside-login{ padding:15px;}
        .aside-menu ul li a{ padding:15px; border-bottom:1px solid #eee; display:block;}
        .aside-menu li.is-active > a{ background:#eee;}
        .aside-menu li a .ivu-icon{ float:right;}
        .search{ 
            width:80%;
            margin-right: 10%;
            margin-top:10px;
            margin-bottom: 10px;
            border:1px solid #eee;
            height:auto;
            border-radius: 3px;
        }
        .search-ipt{
            border:0;
        }
        .search-btn{
            top:1px;
            right:6px;
        }
    }
    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to{
        transform: translateX(20px);
        opacity: 0;
    }
    .person{ float: right; /* margin-right:130px; */}
    .person .name{ font-size:16px; line-height:30px;}
    .person .name:hover,.person .ivu-dropdown-item a:hover{ color:#15ccac;}
    .person .ivu-dropdown-item a{ display:block;}
</style>